<template>
	<header id="header">
		<div class="header-content wrapper">
			<span class="logo">Gremlin</span>
			<nav class="header-nav">
				<router-link to="/" exact>首页</router-link>
				<router-link to="/blog">博客</router-link>
				<router-link to="/music">音乐</router-link>
				<router-link to="/about">关于</router-link>
			</nav>
		</div>
	</header>
</template>

<script>
	export default {
		name: "gHeader"
	};
</script>

<style scoped>
	header {
		width: 100%;
		line-height: 64px;
		background-color: #1e1e22;
        color: #999;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        box-shadow: 1px 1px 25px 0 #0e0e0f;
        transition: background-color, color, box-shadow .3s;
    }
    
    .header-content {
        overflow: hidden;
    }

    .logo {
        float: left;
        font-size: 28px;
        font-weight: bold;
        color: #fff;
    }

    .header-nav {
        width: 50%;
        float: right;
        display: flex;
        justify-content: space-between;
    }

    .header-nav a {
        flex: 1;
        text-align: center;
    }

    .header-nav a:hover {
        background-color: #1a1a1d;
        color: pink;
    }

    .header-nav a.router-link-active {
        border-bottom: 2px solid pink;
        color: pink;
    }
</style>